<template>
  <div>
    <el-dialog
      :visible="showEditDialog"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :show-close="true"
      :class="{'mobile-el-dialog-form': showMobilePage}"
      class="small-common-dialog-size operator-dialog"
      @closed="closeDialog"
    >
      <Title title="编辑联系人" style="margin-bottom:12px" font-size="16px"/>
      <el-form ref="contactRef" :rules="rules" :model="formData" label-width="100px" class="form" label-position="right">
        <el-form-item prop="contactPerson" label="客户联系人">
          <el-input
            v-model="formData.contactPerson"
            disabled
            class="width240"
            size="small"
            maxlength="50" />
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input
            v-model="formData.tel"
            class="width240"
            size="small"
            placeholder="请输入"
            maxlength="50" />
        </el-form-item>
        <el-form-item label="协作人">
          <selectWithUserLoad
            v-model="formData.associate"
            :hide-select-list="formData.associate || []"
            :value-type="'object'"
            key-name="id"
            label-name="userName"
            class="width240"
            placeholder="请选择人员"
            show-check-user
            multiple
            filterable
            collapse-tags
            clearable
          />
        </el-form-item>
        <el-form-item label="协作部门">
          <el-cascader
            v-model="formData.coDepartment"
            :show-all-levels="false"
            :options="deptTreeList"
            :props="{
              emitPath:false,
              value: 'id',
              label: 'name',
              checkStrictly: true,
              multiple: true,
            }"
            class="width240"
            placeholder="请选择所属部门"
            size="small"
            collapse-tags
            filterable
            clearable
          >
            <template slot-scope="{ data }">
              <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
                <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
                <span class="inline-tag ellipsisOne">{{ data.name }}</span>
              </el-tooltip>
              <span v-else>{{ data.name }}</span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div class="center btns">
        <el-button class="ok submit-btn" type="primary" size="small" @click="handleSubmit">确定<i v-if="submitLoading" class="el-icon-loading"/></el-button>
        <el-button class="back-btn cancel-btn-style" size="small" @click="handleClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import Title from '@/components/Title';
import { getDepartmentAll } from '@/api/config';
import { editContact } from '@/api/customer';
import ElMessage from '@/utils/message';
import { mapState } from 'vuex';

export default {
  components: { Title, selectWithUserLoad },
  data() {
    return {
      submitLoading: false,
      rules: {
        tel: [{ required: true, trigger: 'change', message: '请输入联系方式' }]
      },
      formData: {
        id: '',
        contactPerson: '',
        tel: '',
        associate: [],
        coDepartment: ''
      },
      showEditDialog: false,
      deptTreeList: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.queryDeptTreeList();
  },
  methods: {
    queryDeptTreeList(sort = false) {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    openDialog(row) {
      let { associate, coDepartment } = row;
      associate && (associate = associate.map(item => { return { id: item.id, userName: item.name }; }));
      coDepartment && (coDepartment = coDepartment.map(item => { return item.id; }));
      this.formData = {
        id: row.id,
        contactPerson: row.contactPerson,
        tel: row.tel,
        associate,
        coDepartment
      };
      this.showEditDialog = true;
    },
    handleClose() {
      this.showEditDialog = false;
      this.formData = {
        contactPerson: '',
        tel: '',
        associate: [],
        coDepartment: []
      };
    },
    handleSubmit() {
      this.$refs.contactRef.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          const params = JSON.parse(JSON.stringify(this.formData));
          params.associate = params.associate.map(item => { return item.id; });
          editContact(params.id, params).then(res => {
            this.submitLoading = false;
            if (res.code === 200) {
              ElMessage.success('操作成功');
              this.$emit('editSuccess');
            }
            this.handleClose();
          }).catch(err => {
            this.submitLoading = false;
            console.log(err);
          });
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.$refs.contactRef.clearValidate();
    }
  }
};
</script>

<style lang="scss" scoped>
.operator-dialog{
  &::v-deep {
    .el-dialog__body{
      padding: 16px 24px 24px !important;
    }
    .el-form-item__label{
      padding: 0 12px 0 8px;
    }
    .filterableSelect{
      width: 90%;
    }
    .ps--active-y {
      padding-right: 10%;
    }
    .el-select__input {
      min-width: 80px;
    }
    .el-select__tags-text {
      color: #406EFF !important;
    }
    .form{
      margin-top: 17px;
      .el-tag.el-tag--info{
        display: flex;
        color: #406EFF;
        align-items: center;
      }
      .el-select .el-tag__close .el-icon-close {
        right: -5px;
      }
      .el-select__tags-text{
        display: inline-block;
        max-width: 160px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .btns{
    padding-top: 10px;
  }
  .width240 {
    width: 240px;
    & ::v-deep {
      .el-input__inner {
        width: 240px;
      }
      .el-input{
        width: 240px;
      }
    }
  }
  .center {
    display: flex;
    justify-content: center;
  }
}
</style>
